<template>
	<el-sub-menu :index="item.id" :key="item.id" v-if="item.type == 'CAIDAN'">
		<template #title>
			<el-icon>
				<component :is="item.icon"></component>
			</el-icon>
			<span>{{ item.name }}</span>
		</template>
		<Menu v-for="(cItem,cIndex) in item.children" :item="cItem" :index="cIndex"/>
	</el-sub-menu>
	<el-menu-item class="my-menu-item" :index="item.routerUrl" :key="item.id" :disabled="item.status == 1" v-else>
		<el-icon>
			<component :is="item.icon"></component>
		</el-icon>
		<template #title>
			<span>{{ item.name }}</span>
		</template>
	</el-menu-item>
</template>

<script>
	export default {
		name: "Menu",
		watch: {},
		props: {
			item: {},
			index: {},
		},
		data() {
			return {
				routerUrl: null,
				maxHeight: 500
			};
		},
		mounted() {
			this.routerUrl = this.$route.path;
			this.maxHeight = document.body.clientHeight - 50
		},
		methods: {
			//选中
			selectHandler(index, indexPath) {
				console.info("selectHandler", index, indexPath)
				let item = this.getMenuByList(this.menuList, index)
				let query = item.routerParam ? JSON.parse(item.routerParam) : {}
				this.$router.push({
					path: index,
					query: query
				})
			},
			getMenuByList(menuList, path) {
				if (!menuList) {
					return null
				}
				for (var i = 0; i < menuList.length; i++) {
					let item = menuList[i]
					// console.info("循环",item.name,item.routerUrl,path)
					if (item.type == 'CAIDAN') {
						let menu = this.getMenuByList(item.children, path)
						if (menu != null) {
							return menu
						}
					} else if (item.type == 'ZICAIDAN') {
						if (item.routerUrl == path) {
							return item
						}
					}
				}
				return null
			}
		},
	};
</script>
<style lang="scss" scoped>
	:deep(.el-scrollbar__wrap) {
		overflow: auto;
		overflow-x: hidden;
	}

	:deep(.el-menu-vertical-demo:not(.el-menu--collapse)) {
		width: 200px;
		min-height: 400px;
		border-right: unset;
	}

	// .el-menu--horizontal {
	//   --el-menu-horizontal-height: 100px;
	// }
</style>